<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/common.css"/>
    <%--<link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap-datetimepicker.min.css">--%>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--%>
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/foundation-datepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/pasonnal-page.css"/>
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/time-zhou.css"/>
    <title>个人页面</title>
</head>
<body>
<div id="pasonnalPage">
    <c:if test="${!empty familyId}">
        <input hidden="hidden" class="familyId" value="${familyId}"/>
    </c:if>

    <input hidden="hidden" class="personId" value="${person.id}">
    <header>
        <a href="javascript:;" class="black">
		    <img src="${ctx}/static/h5/images/back.png" class="go-back" alt=""/>
			<%--<i class="fa fa-angle-left" aria-hidden="true"></i>--%>
            <span>返回</span>
		</a>
        <h4>个人页面</h4>
        <c:if test="${delete=='yes'}">
            <img src="${ctx}/static/h5/images/more-btn.png" class="more-btn" alt=""/>
        </c:if>
    </header>
    <section class="pasonnal-contnet">
        <a href="" class="personDetail">
            <c:if test="${!empty person.avatar}">
                <div ><img src="${person.avatar}" class="pasonnal-head" alt=""/></div>
            </c:if>
            <c:if test="${empty person.avatar}">
                <div ><img src="${ctx}/static/h5/images/personnal.png" class="pasonnal-head" alt=""/></div>
            </c:if>
        </a>
            <p id="my_userStatus"><span class="p-name">${person.name}</span>
                <c:if test="${empty person.user}">
                    <span class="status">未激活</span>
                </c:if>
                <c:if test="${!empty person.user}">
                    <span class="status">已激活</span>
                </c:if>
            </p>

    </section>
    <footer class="footer">
        <ul class="nav nav-pills container">
            <div class="row defined_tab">
                <li class="col-xs-4 active">
                    <a href="javascript:;" class="process">历程</a>
                <li class="col-xs-4">
                    <a href="javascript:;" class="share">分享</a>
                <li class="col-xs-4">
                    <a href="javascript:;" class="family">亲属</a>
            </div>
        </ul>
        <div class="tab-content">
            <!--历程-->
            <div class="process tab-pane fade" style="display: block;">
                <div class="prc_container">
                    <ul class="pro_content" id="upload">
                        <li class="date">今天</li>
                        <li class="circle"></li>
                        <li class="hImg" >
                            <img src="${ctx}/static/h5/images/photo-load.png" id="up_Img"/>
                        </li>
                    </ul>
                    <!--字符串拼接开始位置 历程-->
                    <c:forEach items="${historys}" var="li">
                        <div>
                            <div id="img_box">
                                <ul class="pro_content">
                                    <li class="date">
                                        <p id="year"><fmt:formatDate value="${li.createTime}" pattern="yyyy"/></p>
                                        <p id="day"><fmt:formatDate value="${li.createTime}" pattern="MM"/><fmt:formatDate value="${li.createTime}" pattern="dd"/></p>
                                    </li>
                                    <li class="circle"></li>
                                    <li class="up_box">
                                        <div class="historyDetail">
                                            <input hidden="hidden" value="${li.id}" class="fid"/>
                                            <input hidden="hidden" value="5" class="tagid"/>
                                            <h5 id="explain">${li.content}</h5>
                                            <c:forEach items="${li.picList}" var="pic">
                                                <img src="${pic}" id="rec_Img"/>
                                            </c:forEach>
                                        </div>
                                        <img src="/static/h5/images/delete.png" class="deleteProcess"/>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </c:forEach>
                    <!--字符串拼接结束位置 -->
                </div>
            </div>
            <!--分享-->
            <div id="share" class="tab-pane fade">
                <ul>
                    <c:forEach var="li" items="${shares}">
                        <li class="container">
                            <div class="share-time">
                                <span class="share-time-day"><fmt:formatDate value="${li.createTime}" pattern="dd"/></span><span class="share-time-mouth"><fmt:formatDate value="${li.createTime}" pattern="MM"/></span>月
                            </div>
                            <div class="row">
                                <div class="col-xs-6 share-avatar">
                                    <c:if test="${!empty person.avatar}">
                                        <img src="${person.avatar}" class="" alt=""/>
                                    </c:if>
                                    <c:if test="${empty person.avatar}">
                                        <img src="${ctx}/static/h5/images/personnal.png" alt=""/>
                                    </c:if>
                                </div>
                                <div class="col-xs-6 share-content">
                                        <%--<img src="${ctx}/static/h5/images/share-img.png" class="share-img" alt=""/>--%>
                                    <span class="share-text">${li.content}</span>
                                    <input  hidden="hidden" class="tagid" value="4"/>
                                </div>
                                <input  hidden="hidden" class="fid" value="${li.id}"/>

                            </div>
                            <div class="share_container">
                                <c:forEach items="${li.picList}" var="pic">
                                    <img src="${pic}" id="rec_Img"/>
                                </c:forEach>
                            </div>
                            <!--评论区域-->
                            <div class="cmt_area">
                                    <%--       <p class="issue_cont">
                                               <span class="issue_id">小强</span>
                                               <span>：</span>
                                               <span>我们都是好孩子一个孤独的好孩子我说的经典的简单地念叨念叨念叨念叨</span>
                                           </p >--%>
                            </div>
                            <div class="share-method" >
                                <div class="dianzan">
                                    <c:if test="${li.liked==true}">
                                        <img src="${ctx}/static/h5/images/dianzan.png" alt=""/>
                                        <input hidden="hidden" class="liked" value="1">
                                    </c:if>
                                    <c:if test="${li.liked==false}">
                                        <img src="${ctx}/static/h5/images/dianzan1.png" alt=""/>
                                        <input hidden="hidden" class="liked" value="0">
                                    </c:if>
                                    <span class="dianzan-count">${li.likeCount}</span>
                                    <input  hidden="hidden" class="fid" value="${li.id}"/>
                                </div>
                                <div class="comment">
                                    <img src="${ctx}/static/h5/images/pinglun.png" alt=""/>
                                    <span class="pinglun-count">${li.commentCount}</span>
                                    <input  hidden="hidden" class="tagid" value="4"/>
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
                <img src="${ctx}/static/h5/images/sharebtn.png" class="share_btn"/>
            </div>
            <!--亲属-->
            <div id="family" class="tab-pane fade">
                <ul class="relation">
                    <c:if test="${father!=null}">
                        <li>
                            <a href="#" class="relations">
                                <input hidden="hidden" class="pId" value="${father.id}"/>
                                <c:if test="${empty father.avatar}">
                                    <img src="${ctx}/static/h5/images/head-personnal.png" class="head" alt=""/>
                                </c:if>
                                <c:if test="${!empty father.avatar}">
                                    <img src="${father.avatar}" class="head" alt=""/>
                                </c:if>
                                <span>${father.name}</span>
                                <span class="family-relation">父亲</span>
                                <input hidden="hidden" class="relationId" value="1">
                            </a>
                        </li>
                    </c:if>
                    <c:if test="${mother!=null}">
                        <li>
                            <a href="#" class="relations">
                                <input hidden="hidden" class="pId" value="${mother.id}"/>
                                <c:if test="${empty mother.avatar}">
                                    <img src="${ctx}/static/h5/images/head-personnal.png" class="head" alt=""/>
                                </c:if>
                                <c:if test="${!empty mother.avatar}">
                                    <img src="${mother.avatar}" class="head" alt=""/>
                                </c:if>
                                <span>${mother.name}</span>
                                <span class="family-relation">母亲</span>
                                <input hidden="hidden" class="relationId" value="1">
                            </a>
                        </li>
                    </c:if>
                    <c:if test="${!empty ux}">
                        <li>
                            <a href="#" class="relations">
                                <input hidden="hidden" class="pId" value="${ux.id}"/>
                                <c:if test="${empty ux.avatar}">
                                    <img src="${ctx}/static/h5/images/head-personnal.png" class="head" alt=""/>
                                </c:if>
                                <c:if test="${!empty ux.avatar}">
                                    <img src="${ux.avatar}" class="head" alt=""/>
                                </c:if>
                                <span>${ux.name}</span>
                                <span class="family-relation">妻子</span>
                                <input hidden="hidden" class="relationId" value="2">
                            </a>
                        </li>
                    </c:if>
                    <c:if test="${!empty vir}">
                        <li>
                            <a href="#" class="relations">
                                <input hidden="hidden" class="pId" value="${vir.id}"/>
                                <c:if test="${empty vir.avatar}">
                                    <img src="${ctx}/static/h5/images/head-personnal.png" class="head" alt=""/>
                                </c:if>
                                <c:if test="${!empty vir.avatar}">
                                    <img src="${vir.avatar}" class="head" alt=""/>
                                </c:if>
                                <span>${vir.name}</span>
                                <span class="family-relation">丈夫</span>
                                <input hidden="hidden" class="relationId" value="2">
                            </a>
                        </li>
                    </c:if>
                    <c:forEach var="li" items="${brother}">
                        <li>
                            <a href="#" class="relations">
                                <input hidden="hidden" class="pId" value="${li.id}"/>
                                <c:if test="${empty li.avatar}">
                                    <img src="${ctx}/static/h5/images/head-personnal.png" class="head" alt=""/>
                                </c:if>
                                <c:if test="${!empty li.avatar}">
                                    <img src="${li.avatar}" class="head" alt=""/>
                                </c:if>
                                <span>${li.name}</span>
                                <span class="family-relation">兄弟/姐妹</span>
                                <input hidden="hidden" class="relationId" value="3">
                            </a>
                        </li>
                    </c:forEach>
                    <c:forEach var="li" items="${children}">
                        <li>
                            <a href="#" class="relations">
                                <input hidden="hidden" class="pId" value="${li.id}"/>
                                <c:if test="${empty li.avatar}">
                                    <img src="${ctx}/static/h5/images/head-personnal.png" class="head" alt=""/>
                                </c:if>
                                <c:if test="${!empty li.avatar}">
                                    <img src="${li.avatar}" class="head" alt=""/>
                                </c:if>
                                <span>${li.name}</span>
                                <span class="family-relation">子女</span>
                                <input hidden="hidden" class="relationId" value="4">
                            </a>
                        </li>
                    </c:forEach>
                </ul>
                <input hidden="hidden" class="addfamily" value="${delete}">
               <%-- <c:if test="${delete!='yes'}">--%>
                    <div id="add-img" class="add-img">
                        <div class="add-imgs" id="dropdownMenus">
                            <img src="${ctx}/static/h5/images/join_add.png" alt=""/>
                            <span>新增</span>
                        </div>
                        <%--普通用户显示--%>
                        <ul class="accordion" role="menu" id="familys" aria-labelledby="dropdownMenu1">
                            <c:if test="${person.f=='0'}">
                                <li role="presentation" value="1">
                                    <a role="menuitem" class="adds-editor" tabindex="-1" href="#">
                                        父亲
                                    </a>
                                </li>
                            </c:if>
                            <c:if test="${person.m=='0'}">
                                <li role="presentation" value="1">
                                    <a role="menuitem" class="adds-editor" tabindex="-1" href="#">
                                        母亲
                                    </a>
                                </li>
                            </c:if>
                            <c:if test="${person.s=='M'}"><%--F 标志女 M标志男--%>
                                <li role="presentation" value="2">
                                    <a role="menuitem" class="adds-editor" tabindex="-1" href="#">
                                        妻子
                                    </a>
                                </li>
                            </c:if>
                            <c:if test="${person.s=='F'}"><%--F 标志女 M标志男--%>
                                <li role="presentation" value="2">
                                    <a role="menuitem" class="adds-editor" tabindex="-1" href="#">
                                        丈夫
                                    </a>
                                </li>
                            </c:if>
                            <%--  <li role="presentation" value="3">
                                      <a role="menuitem" class="add-editor" tabindex="-1" href="#">
                                          兄弟姐妹
                                      </a>
                                  </li>--%>
                            <li role="presentation" value="4">
                                <a role="menuitem" class="adds-editor" tabindex="-1" href="#">
                                    子女
                                </a>
                            </li>
                        </ul>
                        <%--管理员显示--%>
                        <ul id="accordion" class="accordion">
                            <li>
                                <div class="link">从家族成员中添加<i class="fa fa-chevron-down"></i></div>
                                <ul class="submenu">
                                    <c:if test="${person.f=='0'}">
                                        <li value="1">
                                            <a class="editor" >父</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${person.m=='0'}">
                                        <li value="2">
                                            <a class="editor" >母</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${person.s=='M'}"><%--F 标志女 M标志男--%>
                                        <li value="3">
                                            <a  class="editor">妻子</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${person.s=='F'}"><%--F 标志女 M标志男--%>
                                        <li value="4">
                                            <a  class="editor">丈夫</a>
                                        </li>
                                    </c:if>
                                    <li value="5">
                                        <a  class="editor">子女</a>
                                    </li>

                                </ul>
                            </li>
                            <li>
                                <div class="link">手动输入<i class="fa fa-chevron-down"></i></div>
                                <ul class="submenu">
                                    <c:if test="${person.f=='0'}">
                                        <li value="1">
                                            <a class="adds-editor" href="#">
                                                父亲
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${person.m=='0'}">
                                        <li value="1">
                                            <a class="adds-editor" href="#">
                                                母亲
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${person.s=='M'}"><%--F 标志女 M标志男--%>
                                        <li value="2">
                                            <a class="adds-editor" href="#">
                                                妻子
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${person.s=='F'}"><%--F 标志女 M标志男--%>
                                        <li value="2">
                                            <a class="adds-editor" href="#">
                                                丈夫
                                            </a>
                                        </li>
                                    </c:if>
                                    <li value="4">
                                        <a class="adds-editor" href="#">
                                            子女
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                    </div>
               <%-- </c:if>--%>
                <!--删除亲属蒙版-->
                <div class="relation_mask"></div>
                <div class="relation_pop">
                    <h5>确认删除该亲属?</h5>
                    <ul id="relation_del">
                        <li class="relation_sure relation_btn">确认</li>
                        <li class="relation_cancle relation_btn">取消</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

</div>
<!--头部隐藏按钮-->
<div class="shows">
    <div id="zhezhaoceng"></div>
    <div id="close">
        <div class="showtree"><a href="#">查看家谱</a></div>
        <div class="delete-family">删除亲属</div>      <!--点击删除亲属-->
    </div>
</div>
<!--新增历程-->
<div id="addProcess">
    <div class="addProcess-head">
        <a href="#"><img src="${ctx}/static/h5/images/back.png" class="go-back" alt=""/></a>
        <h5>历程</h5>
        <button class="btn btn-success" id="editSuccess">完成</button>
    </div>
    <div class="addProcess-content">
        <div style="position: relative">
            <%--<input type="file" id="loadImage" name="file"/>--%>
            <%--<img src="${ctx}/static/h5/images/photo-load.png" class="photo-load" alt=""/>--%>
            <input type="file" multiple id="loadImage"/>
            <img src="${ctx}/static/h5/images/photo-load.png" class="photo-load" id="preview" alt=""/>
            <ul id="imgContainer" style="display: inline-block"></ul>
            <div class="load-status" style="display: none"><img src="${ctx}/static/h5/images/loading.gif" alt=""/></div>
        </div>
        <textarea rows="5" class="process-detail" placeholder="添加历程" id="processContent"></textarea>
    </div>
    <%--<div>--%>
        <%--<input type="text"  placeholder="选择历程时间" id="processTime">--%>
    <%--</div>--%>
    <%--<p id="demo">点击这个按钮，获得您的坐标：</p>
    <button onclick="getLocation()">试一下</button>--%>
    <div id="showerror1"><p></p></div>
</div>
<!--发布分享-->
<div id="publish">
    <div class="container">
        <ul class="share_top row">
            <li class="col-xs-2 cancle_share">取消</li>
            <li class="col-xs-8 font_title">发表文字</li>
            <li class="col-xs-2 issue_share"><button>发送</button></li>
        </ul>
        <div class="share_box">
            <textarea name="" rows="" cols="" class="share_cont" placeholder="这一刻的想法..."></textarea>
            <div class="img_box">
                <ul class="img_place">
                    <!--<li>
                        <img src="../../images/123.jpg">
                    </li>
                    <li>
                        <img src="../../images/1.jpg">
                    </li>-->
                    <li>
                        <label for="add_more" id="oLab">
                            <img src="${ctx}/static/h5/images/add_more.png"/>
                            <input type="file" name="add_more" id="add_more" value="" multiple="multiple"/>
                        </label>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>

<!--发表评论-->
<div class="cmt_btm container">
    <div class="row cmt_box">
        <div class="col-xs-10">
            <textarea placeholder="评论一下：）" class="cmt_cont"></textarea>
        </div>
        <div class="col-xs-2">
            <input type="button" name="" id="cmt_issue" value="发表" />
        </div>
    </div>
</div>
<!--删除评论或取消-->
<ul class="del_cmt">
    <li class="del">删除</li>
    <li class="cancl">取消</li>
</ul>
<!--新增人物编辑-->
<div id="addEditor">
    <div class="addEditor-head">
        <a href=""><img src="${ctx}/static/h5/images/back.png" class="go-back" alt=""/></a>
        <h4>编辑</h4>
    </div>
    <div class="addEditor-content">
        <div class="add-head">
            <img src="${ctx}/static/h5/images/headadd.png" alt=""/>
        </div>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon">姓</span>
                <input type="text" class="form-control" value="${person.familyName}" name="lastname" placeholder="输入姓氏">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon">名</span>
                <input type="text" class="form-control" name="fristname" placeholder="输入名字">
            </div>
        </form>
        <div class="addEditor-source">
            <label for="optionsRadios1">性别</label>
            <label class="checkbox-inline">
                <input type="radio" name="optionsRadiosinline" id="optionsRadios1" value="男" checked>男
            </label>
            <label class="checkbox-inline">
                <input type="radio" name="optionsRadiosinline" id="optionsRadios2" value="女">女
            </label>
        </div>

        <div class="checkbox">
            <label for="isAlive">健在</label>
            <label><input type="checkbox" checked="checked" id="isAlive" value="1"></label>
        </div>
        <div class="container container-editor">
            <div class="row over-time" style="display:none">
                <div class="col-xs-6">去世时间</div>
                <div class="col-xs-6">
                    <div class="input-append date form_datetime">
                        <input class="form-control" type="text"  placeholder="添加去世时间" id="overTime">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">出生日期</div>
                <div class="col-xs-6">
                    <div class="input-append date form_datetime">
                            <input class="form-control" type="text"  placeholder="添加出生日期" id="processTime1">
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">世代</div>
                <div class="col-xs-6">
                    <div class="input-append date form_datetime">
                            <input class="form-control" type="text"  placeholder="添加世代" class="shidai">
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">手机</div>
                <div class="col-xs-6">
                    <input class="form-control" id="tel" placeholder="添加手机号码作为账号" type="tel"  value="">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">微信号</div>
                <div class="col-xs-6">
                    <input class="form-control" id="wx" placeholder="绑定微信账号" type="text"  value="">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">备注</div>
                <div class="col-xs-6">
                    <input class="form-control" id="bz" placeholder="备注信息" type="text"  value="">
                </div>
            </div>
            <button class="btn btn-default" id="sureEdit">确定</button>
            <div id="showerror"><p></p></div>
        </div>
        <div id="datePlugin"></div>
    </div>

    <!--从家族当中选择-->
<%--    <div class="addTo">
        <span>从家族成员中选择</span>
        <img src="${ctx}/static/h5/images/addDown.png"/>
    </div>
    <ul class="addMem">
        <li class="applay_people">
            <span>小润</span>
        </li>
    </ul>
    <!--从家族成员中选择蒙版-->
    <div class="member_mask"></div>
    <div class="member_pop">
        <h5>确人选择该家族成员?</h5>
        <ul id="member_add">
            <li class="member_sure member_btn">确认</li>
            <li class="member_cancle member_btn">取消</li>
        </ul>
    </div>--%>
</div>

</body>
<script src="${ctx}/static/h5/js/public/jquery-2.2.3.min.js"></script>
<script src="${ctx}/static/h5/js/public/bootstrap.min.js"></script>
<script src="${ctx}/static/h5/js/personal/pasonnal-page.js"></script>
<script src="${ctx}/static/h5/js/public/date.js"></script>
<script src="${ctx}/static/h5/js/public/iscroll.js"></script>
<script>

    $('#overTime').date();
    $('#processTime').date();
    $('#processTime1').date();



</script>
</html>